<template>
  <div class="chart-container">
    <div class="select">
      <el-radio-group v-model="radio" size="large">
        <el-radio-button label="销量" />
        <el-radio-button label="销售额" />
      </el-radio-group>
      <el-select v-model="selectValue" class="m-2" placeholder="Select" size="large">
        <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div id="box"></div>
  </div>

</template>
<script lang="ts" setup>
import * as echarts from "echarts"
import { onMounted, onUpdated, ref, watch, watchEffect } from "vue";
import * as api from "@/request/api"
import { computed } from "@vue/reactivity";
import type { ISalePieItem } from "@/request/Stat/index"
import type { Ref } from "vue";
import type { ECharts } from "echarts";

import { getMap } from '@/request/china'

let myChart: ECharts;//声明图表

// 单选按钮。
const radio = ref('销售额');
// 选择的那一项
const selectValue = ref('today')
// 选择列表
const selectOptions = [
  {
    value: 'yesterday',
    label: '昨天',
  },
  {
    value: 'today',
    label: '今天',
  },
  {
    value: 'three',
    label: '前3天',
  },
  {
    value: 'seven',
    label: '前7天',
  },
  {
    value: 'fourteen',
    label: '前14天',
  },
  {
    value: 'thirty',
    label: '前30天',
  },
  {
    value: 'sixty',
    label: '前60天',
  },
]




// 请求回来的数据
const salePieList: Ref<ISalePieItem[]> = ref([]);

interface IIndex {
  [index: string]: string
}
// 映射表
const zhToEn: IIndex = {
  "销量": "sale", "销售额": "money"
};

interface ISeriesData {
  name: string;
  value: number;
}

// 【】图表配置  初始化图表+设置图表

// 根据请求数据获取 图表数据
const seriesData = computed(() => {
  return salePieList.value.map(item => {
    for (let key in item) {
      // key属性包含当前选择的day，且包含当前的销售类别
      if (key.includes(selectValue.value) && key.includes(zhToEn[radio.value])) {
        return {
          name: item.name,
          value: +item[key],
        }
      }
    }
    // ts报错不能将undefined赋给 []
    return {
      name: '',
      value: 0,
    }
  })
})

// 根据图表数据，设置配置。
// 指定图表的配置项和数据
const option = computed(() => {
  return {
    legend: {
      right: 0,
      width: 350,
      height: 100,
    },
    tooltip: {
      trigger: 'item',
      formatter: function (p: any) {
        return `${p.name} : ${p.value.toLocaleString()} (${p.percent}%)`;
      },
      // valueFormatter: (value: number | string): string => Number(value).toLocaleString()
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [50, 100],//设置内外半径后，height width失效
        center: ['30%', '20%'],
        // roseType: 'radius',
        itemStyle: {
          borderRadius: 8
        },
        data: seriesData.value
      }
    ]
  };
})

// 设置图片的配置
const setChartOption = (isResize = false) => {
  if (!myChart) {
    myChart = echarts.init(document.getElementById('box')!);
  }
  //   myChart.clear();//清除画布
  //   myChart.dispose();//清除实例

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option.value);
};



// 【】 获取图表数据，然后设置配置
const getStatData = async () => {
  const { saleMap, salePie } = await api.stat.getAdminStat();
  salePieList.value = salePie;
  setChartOption();
}
getStatData();

// 【】 更新阶段，设置配置。
onUpdated(() => {
  setChartOption();
  console.log(seriesData);
})

// 【】监听窗口大小，图表画布尺寸响应式
onMounted(() => {
  window.onresize = () => {
    myChart.resize();
  }
});









// updated再次设置option---option响应式--- seriesData-----value option变 （salePieList不变）

// 改变day和销售类型后，图表也改变。---update
</script>
<style lang="scss" scoped>
.chart-container {
  width: 100%;
  box-sizing: border-box;
  margin-top: 50px;
  padding: 10px 20px;
}

.select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

#box {
  width: 100%;
  height: 600px;
}
</style>